<template>
	<NavBar :obj="{ title: '转换记录', color: '#000', backgroundColor: '#fff' }" />

	<view class="container">
		<view class="fill">
			<view class="item flex items-center justify-between" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="intro">{{ item.account}} <uni-icons type="arrow-right" size="14"></uni-icons> {{ item.take_account}}</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="right flex flex-col items-end justify-end">
					<view class="intro">{{item.amount}}</view>
				</view>
			</view>

		</view>
		
		
		<up-empty v-if="!list.length" icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
		
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { port, goUrl } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	const list = ref([]);
	const title = ref('');

	const listRef = ref({
		page: 1,

	});

	onShow(() => {
		listRef.value.page = 1;
		list.value.length = 0;
		getExchangeRecord();
	});

	onReachBottom(() => {
		getExchangeRecord();
	});

	async function getExchangeRecord() {
		let res = await port('getExchangeRecord', listRef.value);
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.tabs {
		background-color: #fff;
	}
	.container {
		.fill {
			margin-top: 24rpx;
			padding: 0 30rpx;
			background-color: #fff;
			.item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eeeeee;
				&:last-child {
					border-bottom: none;
				}
				.left {
					.intro {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
					.time {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 21rpx;
					}
				}
				.right {
					.intro {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
					.time {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 21rpx;
					}
				}
			}
		}
	}
</style>
